<template>
    <div class="seller-container">
        <div class="header">
            <div class="iconfont" @click="$router.go(-1)">&#xe603;</div>
            <div class="title">卖家信息</div>
        </div>
        <div class="seller-msg">
            <div class="seller-info">
                <div class="headerImg"><img :src="seller.headerImg" alt=""></div>
                <div class="seller-name">{{seller.username}}</div>
                <div class="follow"><van-icon name="like-o" />关注卖家</div>
                <div class="seller-data">
                    <div class="item">
                        <div>粉丝</div><span>{{seller.fans}}</span>
                    </div>
                    <div class="item">
                        <div>关注</div><span>{{seller.follower}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="phone-address">
            <van-divider>联系</van-divider>
            <div class="contact-me">电话：{{seller.phone}}</div>
            <div class="contact-me">微信：{{seller.wx}}</div>
            <div class="contact-me">地址：{{seller.address}}</div>
            <van-divider></van-divider>
        </div>
        <div class="product">
            <van-divider>他的发布</van-divider>
            <van-card v-for="it in products" :key="it.id" @click="toDetail(it.id)"
                :desc="it.pdesc"
                :title="it.title"
                thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
                >
                <template #tags>
                    <van-tag plain type="danger" v-for="item in it.tag" :key="item">{{item}}</van-tag>
                </template>
                <template #footer>
                    <van-button v-if="it.collected" @click="collectedChange(it.id)" size="mini" type="danger">收藏</van-button>
                    <van-button v-if="!it.collected" @click="collectedChange(it.id)" size="mini">收藏</van-button>
                </template>
            </van-card>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                seller:{},
                products: [
                    {id: '0024', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '006', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '0042', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '002', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '003', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false},
                    {id: '001', title: '优质双月猪', pdesc:'小猪已满双月，能吃能睡很好养，不挑食', tag: ['双月猪','山猪'], collected:false}
                ]
            }
        },
        created() {
            //获取商家信息请求
            this.seller = {
                username: 'ME',
                headerImg: 'https://img2.baidu.com/it/u=3886895525,3764775842&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                fans: 232,
                follower: 23,
                supporter:1563,
                phone: '15846985862',
                wx: '15846985862',
                address: '贵州省 毕节市 威宁县'
            }
        },
        methods: {
            //收藏商品
            collectedChange(id) {
                this.list.map(it => {
                    if(it.id === id){
                        it.collected = !it.collected
                    }
                })
                //发送收藏请求
            },
            //关注用户
            followedChange(id) {
                this.followed = !this.followed
                console.log(id)
                //发送关注请求
            },
            //进入详情页
            toDetail(id){
                this.$router.push({path:'/product/detail', query:{id}})
            }
        },
    }
</script>
<style lang="less" scoped>
    @import "../../style/common.less";
    .seller-container{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: @cdd;
        overflow: auto;
        > .header{
            height: 120px;
            background-color: @c43;
            font-size: .8rem;
            font-weight: 500;
            text-align: center;
            padding: 0 12px;
            .iconfont{
                line-height: 40px;
                font-size: .9rem;
                position: absolute;
                left: 12px;
            }
            .title{
                line-height: 40px;
                height: 40px;
                margin: auto;
                text-align: center;
            }
        } 
        
        > .seller-msg{
            height: 130px;
            width: 100%;
            position: relative;
            > .seller-info{
                width: 90%;
                height: 170px;
                background-color: @cff;
                border-radius: 6px;
                margin: auto;
                text-align: center;
                position: absolute;
                top: -50px;
                left: 5%;
                > .headerImg{
                    width: 100%;
                    height: 30px;
                    position: relative;
                    > img{
                        width: 50px;
                        height: 50px;
                        border-radius: 25px;
                        position: absolute;
                        top: -25px;
                        left: calc(50% - 25px);
                    }
                }
                > .seller-name{
                    font-size: .75rem;
                    line-height: 1.3rem;
                }
                > .follow{
                    font-size: .7rem;
                    line-height: 1.4rem;
                }
                > .seller-data{
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    font-size: .75rem;
                    height: calc(100% - 85px);
                    .van-icon:before{
                        font-size: .9rem;
                    }
                }
            }
        }
        > .phone-address{
            padding: 10px 16px;
            font-size: .8rem;
            background-color: @cff;
            border-radius: 5px;
            // background: url(../../static/imgs/backimg1.jpg) center center / 375px 196px no-repeat;
            .contact-me{
                text-indent: 2rem;
                line-height: 1.5rem;
            }
        }
        > .product{
            background-color: @cff;
        }
    }
</style>